<template>
  <view class="wrapper">
    <view class="re-password">
      <u--form
          labelPosition="left"
          :model="postForm"
          :rules="rules"
          ref="uForm"
          class="form"
          labelWidth="160rpx"
          labelAlign="right"
          :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
      >
        <u-form-item label="旧密码:" prop="old_password">
          <u--input
              v-model="postForm.old_password"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
              type="password"
          ></u--input>
        </u-form-item>
        <u-form-item label="新密码:" prop="password">
          <u--input
              v-model="postForm.password"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
              type="password"
          ></u--input>
        </u-form-item>
        <u-form-item label="重复密码:" prop="password2">
          <u--input
              v-model="postForm.password2"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
              type="password"
          ></u--input>
        </u-form-item>
        <u-button :disabled="disabled" type="success" class="btn" :color="activeColor" @click="save" text="提交"></u-button>
      </u--form>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import base64 from '../../util/base64'
// import Service from '../../api/service'
// const serviceModel = new Service()

export default {
  data() {
    return {
      activeColor: color.main_color,
      postForm: {
        old_password: '',
        password: '',
        password2: '',
      },
      rules: {
        old_password: {
          required: true,
          message: '请输入旧密码',
          trigger: ['blur', 'change']
        },
        password: {
          required: true,
          message: '请输入新密码',
          trigger: ['blur', 'change']
        },
        password2: {
          required: true,
          message: '请输入重复密码',
          trigger: ['blur', 'change']
        },
      },
      disabled: false
    }
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    // this.$refs.uForm.setRules(this.rules)
  },
  onLoad() {
  },
  methods: {
    save() {
      this.$refs.uForm.validate().then(res => {
        // console.log(res)
        if (res) {
          // 没有处理, 因为直接用验证码登录
          // this.disabled = true
          // serviceModel.transferSave({ ...this.postForm }).then(() => {
          //   uni.showToast({
          //     icon: 'none',
          //     title: '操作成功',
          //   })
          //   this.fetch()
          //   setTimeout(() => {
          //     uni.navigateTo({
          //       url: '/sub_common/balance/index?type=2'
          //     })
          //   }, 500)
          // }).finally(() => {
          //   setTimeout(() => {
          //     this.disabled = false
          //   }, 1000)
          // })
        }
      }).catch(e => {
        // console.log(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  .re-password {
    padding: 20rpx;
    background: white;
    font-size: 24rpx;
    .form {
      .btn {
        margin-top: 20px;
      }
    }
  }
}
</style>
